<script setup>
	import { ref } from 'vue'
	import { userInfoApi } from '@/services/user'
	import { useUserStore } from '@/stores/user'
	import Consulting from '@/components/consulting/index.vue'
	import MedicineOrder from '@/components/medicine-order/index.vue'
	import QuickTools from '@/components/quick-tools/index.vue'

	const userStore = useUserStore()
	const userInfo = ref({})

	// 问诊中数据
	const consultingList = ref([
		{
			name: '王医生',
			title: '内分泌科 | 主任医生',
			level: '三甲',
			hospital: '积水潭医院',
			avatar: '/static/uploads/doctor-avatar.jpg',
		},
		// ... 可以添加更多数据
	])

	// 药品订单数据
	const medicineOrderList = ref([
		{ label: '待付款', count: '3', icon: '/static/images/order-status-1.png' },
		{ label: '待发货', count: '0', icon: '/static/images/order-status-2.png' },
		{ label: '待收货', count: '0', icon: '/static/images/order-status-3.png' },
		{ label: '已完成', count: '0', icon: '/static/images/order-status-4.png' },
	])

	// 快捷工具数据
	const quickToolsList = ref([
		{
			title: '我的问诊',
			icon: 'icon-symbol-tool-01',
			url: '/subpkg_consult/order_list/index',
		},
		{ title: '我的处方', icon: 'icon-symbol-tool-02', url: '' },
		{
			title: '家庭档案',
			icon: 'icon-symbol-tool-03',
			url: '/subpkg_archive/list/index',
		},
		{ title: '地址管理', icon: 'icon-symbol-tool-04', url: '' },
		{ title: '我的评价', icon: 'icon-symbol-tool-05', url: '' },
		{ title: '官方客服', icon: 'icon-symbol-tool-06', url: '' },
		{ title: '设置', icon: 'icon-symbol-tool-07', url: '' },
	])

	async function getUserInfo() {
		const { code, data, message } = await userInfoApi()
		if (code !== 10000) return uni.utils.toast(message)

		userInfo.value = data
	}

	async function onLogoutClick() {
		const { confirm } = await uni.utils.modal('温馨提示', '您是否退出登录')
		if (!confirm) return

		userStore.token = ''
		userStore.openType = 'switchTab'
		userStore.redirectURL = '/pages/index/index'
		uni.reLaunch({ url: '/pages/login/index' })
	}

	getUserInfo()
</script>
<template>
	<scroll-page backgroundColor="#F6F7F9">
		<view class="my-page">
			<view class="user-profile">
				<image
					src="/static/uploads/doctor-avatar.jpg"
					mode=""
					class="user-avatar"
				></image>
				<view class="user-info">
					<text class="nickname">{{ userInfo.account }}</text>
					<text class="iconfont icon-edit edit"></text>
				</view>
			</view>
			<view class="user-data">
				<navigator hover-class="none" url="">
					<text class="data-number">{{ userInfo.collectionNumber }}</text>
					<text class="data-label">收藏</text>
				</navigator>
				<navigator hover-class="none" url="">
					<text class="data-number">{{ userInfo.likeNumber }}</text>
					<text class="data-label">关注</text>
				</navigator>
				<navigator hover-class="none" url="">
					<text class="data-number">{{ userInfo.score }}</text>
					<text class="data-label">积分</text>
				</navigator>
				<navigator hover-class="none" url="">
					<text class="data-number">{{ userInfo.couponNumber }}</text>
					<text class="data-label">优惠券</text>
				</navigator>
			</view>
			<custom-section :custom-style="{ paddingBottom: '20rpx' }" title="问诊中">
				<Consulting :list="consultingList" />
			</custom-section>
			<custom-section showArrow title="药品订单">
				<template #right>
					<navigator url="/subpkg_medicine/order_list/index" hover-class="none">
						全部订单
					</navigator>
				</template>
				<MedicineOrder :list="medicineOrderList" />
			</custom-section>
			<custom-section title="快捷工具">
				<QuickTools :list="quickToolsList" />
			</custom-section>
			<view class="logout" @click="onLogoutClick"> 退出登录 </view>
		</view>
	</scroll-page>
</template>

<style lang="scss" scoped>
	.my-page {
		min-height: 500rpx;
		padding: 150rpx 30rpx 10rpx;
		background-image: linear-gradient(
			180deg,
			rgba(44, 181, 165, 0.46) 0,
			rgba(44, 181, 165, 0) 500rpx
		);
		.user-profile {
			display: flex;
			height: 140rpx;
			.user-avatar {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
			}
			.user-info {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				line-height: 1;
				margin-left: 24rpx;
				padding: 30rpx 0;

				.nickname {
					font-size: 36rpx;
					font-weight: 500;
					color: #333;
				}
				.icon-edit {
					color: #16c2a3;
					padding-top: 20rpx;
					font-size: 32rpx;
				}
			}
		}
		.user-data {
			display: flex;
			justify-content: space-around;
			height: 100rpx;
			text-align: center;
			margin: 90rpx 0 30rpx;
			line-height: 1;

			.data-number {
				display: block;
				margin-bottom: 10rpx;
				font-size: 48rpx;
				color: #333;
			}
			.data-label {
				display: block;
				font-size: 24rpx;
				color: #979797;
			}
		}
		.logout {
			height: 68rpx;
			text-align: center;
			line-height: 68rpx;
			margin: 40rpx 0 30rpx;
			border-radius: 20rpx;
			font-size: 26rpx;
			color: #eb5757;
		}
	}
</style>
